<template>
  <el-header>
    <!-- 右侧导航栏折叠按钮 -->
    <div style="height: 100%; display: flex">
      <div class="header-left">
        <span
          class="btn-collapse"
          @click="collapseChage"
          :title="collapse ? '展开侧边栏' : '收起侧边栏'"
        >
          <i class="el-icon-menu"></i>
        </span>
        <!-- 系统标题 -->
        <div class="header-title">IBMS 运维系统</div>
      </div>
      <div class="tab-box">
        <div
          class="tab-item"
          @click="changeTab(index)"
          :class="cur == index ? 'active' : ''"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <div class="header-right">
      <!-- 消息中心 -->
      <div class="btn-info">
        <el-tooltip placement="bottom">
          <span slot="content">{{
            message ? `有${message}条消息` : "消息中心"
          }}</span>
          <router-link to="/info">
            <i class="el-icon-bell"></i>
          </router-link>
        </el-tooltip>
        <span class="btn-info-tip" v-if="message"></span>
      </div>
      <!-- 用户头像 -->
      <img class="header-portrait" src="static/portrait.jpg" alt="用户头像" />
      <!-- 用户名下拉菜单 -->
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ username }}
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided command="loginout"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script>
import Bus from "./bus";
export default {
  name: "Header",
  data() {
    return {
      tabList: ["运维管理", "子系统集成", "巡检工单", "低碳计划", "3D可视化"],
      cur: 0,
      message: 1,
      username: localStorage.getItem("username"),
      collapse: false,
    };
  },
  methods: {
    // 侧边栏折叠打开效果
    collapseChage() {
      this.collapse = !this.collapse;
      Bus.$emit("collapse", this.collapse);
    },

    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if ("loginout" == command) {
        localStorage.removeItem("username");
        this.$router.push("/login");
      }
    },
    changeTab(index) {
      if (index != 4) {
        this.cur = index;
        this.$emit("changeTab", index);
      }
    },
  },
};
</script>

<style scoped lang="less">
[class*="el-icon"] {
  cursor: pointer;
}
.tab-box {
  display: flex;
  align-items: center;
}
.tab-item {
  width: 100px;
  height: 90%;
  background-color: #ccc;
  border-radius: 8px;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  font-size: 14px;
  cursor: pointer;
}
.tab-item.active {
  color: #fff;
  background-color: @headerBgColor;
}
.el-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  // background-color: @headerBgColor;
  color: white;
  font-size: 16px;
}
.header-title {
  margin-left: 15px;
  font-size: 20px;
  font-weight: 600;
}
.header-title,
.btn-info {
  display: inline-block;
}

.btn-collapse,
.el-icon-bell {
  font-size: 25px;
}
.header-left {
  width: 220px;
  height: 100%;
  background-color: @headerBgColor;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.header-right {
  color: #333333;
  height: 100%;
  padding-right: 30px;
  display: flex;
  align-items: center;
}
.btn-collapse {
  vertical-align: sub;
}
.btn-info {
  position: relative;
  margin-right: 10px;
}
.btn-info-tip {
  position: absolute;
  top: 0px;
  .circle(8px);
  background-color: #ff464f;
}
.el-icon-bell {
  color: #333333;
  vertical-align: text-top;
}
.header-portrait {
  .circle(40px);
  margin: 0 20px;
  vertical-align: middle;
}
.el-dropdown-link {
  color: #333333;
  cursor: pointer;
}
</style>
